<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { ElMessage } from 'element-plus'
import { useSettingsStore } from '/@/store/modules/settings'
import { lightenColor } from '/@/utils/lightenColor'

defineOptions({
  name: 'ImportantUserMonitoring',
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

const handleClick = (row: any) => {
  row.processingResult = '已处理'
}

const handleIgnore = (row: any) => {
  row.ignoreResult = '已忽略'
}

const handleDispatch = (row: any) => {
  row.dispatchResult = '已派单'
}

// 重要监测用户列表
const monitoredUsers = ref<any[]>([])

// 添加用户到重要监测列表
const addToMonitored = (user: any) => {
  // 检查用户是否已在列表中
  const exists = monitoredUsers.value.some((item) => item.id === user.id)
  if (exists) {
    ElMessage.warning(`用户 ${user.name} 已在重要监测用户列表中`)
  } else {
    monitoredUsers.value.push({ ...user })
    ElMessage.success(`已将用户 ${user.name} 添加到重要监测用户列表`)
  }
}

// 从重要监测列表移除用户
const removeFromMonitored = (userId: string) => {
  const index = monitoredUsers.value.findIndex((user) => user.id === userId)
  if (index !== -1) {
    const userName = monitoredUsers.value[index].name
    monitoredUsers.value.splice(index, 1)
    ElMessage.success(`已将用户 ${userName} 从重要监测用户列表中移除`)
  }
}

// Card info data for monitoring overview cards
const monitoringCards = reactive<any>([
  {
    title: '监测覆盖与响应概览',
    en: 'Monitoring Coverage & Response Overview',
    icon: 'dashboard-line',
    data: [
      {
        name: '实时监测用户数',
        en: 'Monitored Users',
        value: '1972',
        unit: '户',
      },
      {
        name: '平均响应处理时长',
        en: 'Avg Response Time',
        value: '1.6',
        unit: 'h',
      },
      {
        name: '累计处置完成率',
        en: 'Estimated Load Risk',
        value: '97',
        unit: '%',
      },
    ],
  },
  {
    title: '异常预警统计',
    en: 'Abnormal Event Overview',
    icon: 'error-warning-line',
    data: [
      {
        name: '异常用户数',
        en: 'Abnormal Users',
        value: '3',
        unit: '户',
      },
      {
        name: '累计告警数量',
        en: 'Total Alarms Issued',
        value: '2',
        unit: '件',
      },
      {
        name: '当前未处理告警',
        en: 'Unresolved Alarms',
        value: '1',
        unit: '件',
      },
    ],
  },
  {
    title: '漏电与安全监测',
    en: 'Leakage & Safety Monitoring',
    icon: 'shield-flash-line',
    data: [
      {
        name: '漏电检测点数',
        en: 'Leakage Monitoring Points',
        value: '14',
        unit: '个',
      },
      {
        name: '漏电异常点数',
        en: 'Abnormal Leakage Points',
        value: '1',
        unit: '个',
      },
      {
        name: '实时异常率',
        en: 'Live Abnormal Rate',
        value: '7.1',
        unit: '%',
      },
    ],
  },
])

const tableData = [
  {
    date: '18:00',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: '严重',
    tag: '进行中',
    processingResult: '未处理',
    ignoreResult: '未忽略',
    dispatchResult: '未派单',
  },
]

const userImageModel = ref<any>('')
const userGroup = ref<any>('0')
const searchResults = ref<any>([])
const showDialog = ref(false)
const selectedUser = ref<any>(null)

watch(
  userImageModel,
  (newVal) => {
    if (!newVal) {
      nextTick(() => {
        searchResults.value = []
      })
    }
  },
  { immediate: true }
)

// 用户查询结果数据
const searchUserData = reactive([
  {
    id: 'U037',
    name: '张三',
    district: '南山台区',
    capacity: '380V/250kVA',
    userGroup: '商业用户',
  },
  {
    id: 'U042',
    name: '李四',
    district: '福田台区',
    capacity: '380V/160kVA',
    userGroup: '工业用户',
  },
  {
    id: 'U055',
    name: '王五',
    district: '罗湖台区',
    capacity: '380V/200kVA',
    userGroup: '商业用户',
  },
])

// 告警历史数据
const alarmHistory = reactive<Record<string, Array<{ date: string; content: string; status: string }>>>({
  U037: [
    { date: '25-3-29', content: '发生电压越限告警', status: '已处理' },
    { date: '25-2-15', content: '发生过载告警', status: '已处理' },
  ],
  U042: [{ date: '25-3-20', content: '发生过流告警', status: '处理中' }],
  U055: [
    { date: '25-3-25', content: '发生漏电告警', status: '已处理' },
    { date: '25-2-10', content: '发生温度过高告警', status: '已处理' },
  ],
})

// 搜索用户
const searchUser = () => {
  if (userImageModel.value) {
    searchResults.value = searchUserData.filter(
      (user) => user.id.toLowerCase().includes(userImageModel.value) || user.id.toUpperCase().includes(userImageModel.value)
    )
  } else {
    searchResults.value = []
  }
}

// 查看告警详情
const showAlarmDetails = (user: any) => {
  selectedUser.value = user
  showDialog.value = true
}

const option = reactive<any>({
  tooltip: {
    trigger: 'axis',
    formatter: '当前时刻:<br/>{b}<br/>当前负荷: <br/>{c}kw',
    extraCssText: 'width:120px;white-space:wrap',
    backgroundColor: '#21ba94',
    textStyle: {
      color: '#fff',
    },
    borderWidth: 0,
  },
  grid: {
    top: '5%',
    left: '5%',
    right: '5%',
    bottom: '10%',
    // containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
    axisTick: {
      alignWithLabel: true,
    },
  },

  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.6,
      },
    },
  },

  series: {
    name: '当前时刻',
    type: 'line',
    smooth: false,
    lineStyle: {
      color: '#21ba94',
    },
    areaStyle: {
      color: '#b5e7db',
    },
    data: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
    itemStyle: {
      borderRadius: [2, 2, 0, 0],
      color: new graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: lightenColor(theme.value.color, 50) },
        { offset: 1, color: theme.value.color },
      ]),
    },
  },
})

const optionThree = reactive<any>({
  tooltip: {
    show: false,
    trigger: 'axis',
    formatter: '当前时刻:<br/>{b}<br/>当前负荷: <br/>{c}kw',
    extraCssText: 'width:120px;white-space:wrap',
    backgroundColor: '#21ba94',
    textStyle: {
      color: '#fff',
    },
    borderWidth: 0,
  },
  legend: {
    show: false,
    top: 'bottom',
    icon: 'rect',
    data: ['上班族', '老年用户', '商户', 'EV用户'],
  },
  // grid: {
  //   top: '5%',
  //   left: '5%',
  //   right: '5%',
  //   bottom: '10%',
  //   // containLabel: true,
  // },
  xAxis: {
    type: 'category',
    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    axisTick: {
      alignWithLabel: true,
    },
  },

  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.6,
      },
    },
  },

  series: [
    {
      name: '监测点A3',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#1890ff',
      },
      areaStyle: {
        color: '#1890ff',
        opacity: 0.2,
      },
      data: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
      showSymbol: false,
      // itemStyle: {
      //   borderRadius: [2, 2, 0, 0],
      //   color: new graphic.LinearGradient(0, 0, 1, 0, [
      //     { offset: 0, color: lightenColor(theme.value.color, 50) },
      //     { offset: 1, color: theme.value.color },
      //   ]),
      // },
    },
  ],
})
watch(
  theme.value,
  () => {
    option.series.itemStyle.color = new graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: lightenColor(theme.value.color, 50) },
      { offset: 1, color: theme.value.color },
    ])
  },
  { immediate: true }
)
const topList = reactive<any>([
  {
    icon: 'airplay-line',
    content: '重要用户数量',
    number: '1987',
    unit: '户',
  },
  {
    icon: 'flashlight-line',
    content: '实时总负荷',
    number: '1987',
    unit: 'kw',
  },
  {
    icon: 'error-warning-line',
    content: '异常用户数',
    number: '87',
    unit: '户',
  },
  {
    icon: 'alarm-warning-line',
    content: '告警数量',
    number: '39',
    unit: '件',
  },
  {
    icon: 'device-line',
    content: '漏电监测点',
    number: '0.8',
    unit: '个',
  },
])
const currentStatus = reactive<any>({
  status: '0',
  user: '0',
  hours: '0',
  currentDay: '0',
})
const chooseIndex = ref<any>(0)

const handleStyleFun = (e: any, status: any) => {
  chooseIndex.value = status
}

// 添加漏电监测点数据
const monitoringPoints = ref([
  { value: '0', label: '漏电监测点A3', userId: 'U555', userType: '商业用户I类' },
  { value: '1', label: '漏电监测点B2', userId: 'U423', userType: '工业用户II类' },
  { value: '2', label: '漏电监测点C1', userId: 'U789', userType: '商业用户II类' },
  { value: '3', label: '漏电监测点D5', userId: 'U301', userType: '居民用户I类' },
])

// 漏电监测表格数据
const leakageTableData = ref([
  { date: '10:00', name: '张三', state: '0.5mA', city: '正常' },
  { date: '10:30', name: '李四', state: '0.8mA', city: '正常' },
  { date: '11:00', name: '王五', state: '1.2mA', city: '正常' },
  { date: '11:30', name: '赵六', state: '2.5mA', city: '告警' },
  { date: '12:00', name: '钱七', state: '1.0mA', city: '正常' },
  { date: '12:30', name: '孙八', state: '0.7mA', city: '正常' },
  { date: '13:00', name: '周九', state: '3.0mA', city: '告警' },
  { date: '13:30', name: '吴十', state: '0.9mA', city: '正常' },
])

// 添加不同监测点的表格数据
const monitoringPointTableData = reactive<Record<string, any[]>>({
  '0': [
    { date: '10:00', name: '张三', state: '0.5mA', city: '正常' },
    { date: '10:30', name: '李四', state: '0.8mA', city: '正常' },
    { date: '11:00', name: '王五', state: '1.2mA', city: '正常' },
    { date: '11:30', name: '赵六', state: '2.5mA', city: '告警' },
    { date: '12:00', name: '钱七', state: '1.0mA', city: '正常' },
    { date: '12:30', name: '孙八', state: '0.7mA', city: '正常' },
    { date: '13:00', name: '周九', state: '3.0mA', city: '告警' },
    { date: '13:30', name: '吴十', state: '0.9mA', city: '正常' },
  ],
  '1': [
    { date: '09:00', name: '刘一', state: '0.6mA', city: '正常' },
    { date: '09:30', name: '陈二', state: '1.2mA', city: '正常' },
    { date: '10:00', name: '张三', state: '1.8mA', city: '正常' },
    { date: '10:30', name: '李四', state: '3.5mA', city: '告警' },
    { date: '11:00', name: '王五', state: '2.0mA', city: '正常' },
    { date: '11:30', name: '赵六', state: '1.4mA', city: '正常' },
  ],
  '2': [
    { date: '08:00', name: '郑七', state: '0.3mA', city: '正常' },
    { date: '08:30', name: '周八', state: '0.5mA', city: '正常' },
    { date: '09:00', name: '吴九', state: '0.7mA', city: '正常' },
    { date: '09:30', name: '郭十', state: '0.9mA', city: '正常' },
    { date: '10:00', name: '孙十一', state: '2.3mA', city: '告警' },
  ],
  '3': [
    { date: '11:00', name: '林一', state: '0.4mA', city: '正常' },
    { date: '12:00', name: '黄二', state: '0.6mA', city: '正常' },
    { date: '13:00', name: '赵三', state: '1.0mA', city: '正常' },
    { date: '14:00', name: '钱四', state: '1.5mA', city: '正常' },
    { date: '15:00', name: '孙五', state: '2.8mA', city: '告警' },
    { date: '16:00', name: '李六', state: '3.2mA', city: '告警' },
    { date: '17:00', name: '周七', state: '0.8mA', city: '正常' },
  ],
})

// 漏电监测图表数据
const monitoringPointChartData = reactive<Record<string, { xData: string[]; yData: number[] }>>({
  '0': {
    xData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    yData: [0.3, 0.4, 0.2, 0.8, 1.5, 0.6],
  },
  '1': {
    xData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    yData: [0.5, 0.7, 0.9, 1.2, 0.8, 1.1],
  },
  '2': {
    xData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    yData: [0.2, 0.3, 0.5, 0.4, 0.6, 0.8],
  },
  '3': {
    xData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    yData: [1.1, 0.9, 0.7, 1.3, 1.5, 1.8],
  },
})

// 分页相关
const pagination = reactive({
  currentPage: 1,
  pageSize: 2,
  total: 0,
})

// 实际显示的表格数据（分页后）
const displayLeakageData = computed(() => {
  pagination.total = leakageTableData.value.length
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  return leakageTableData.value.slice(start, end)
})

// 处理监测点变化
const handleMonitoringPointChange = () => {
  // 更新图表数据
  const pointId = currentStatus.hours
  const currentPointData = monitoringPointChartData[pointId]
  if (currentPointData) {
    optionThree.xAxis.data = currentPointData.xData
    optionThree.series[0].data = currentPointData.yData
  }

  // 更新表格数据
  const currentTableData = monitoringPointTableData[pointId]
  if (currentTableData) {
    leakageTableData.value = currentTableData
  }

  // 更新用户信息
  const selectedPoint = monitoringPoints.value.find((p) => p.value === currentStatus.hours)
  if (selectedPoint) {
    selectedMonitoringUser.value = `${selectedPoint.userId}(${selectedPoint.userType})`
  }

  // 重置分页到第一页
  pagination.currentPage = 1
}

// 选中的监测点对应的用户信息
const selectedMonitoringUser = ref(`${monitoringPoints.value[0].userId  }(${  monitoringPoints.value[0].userType  })`)

// 监听监测点选择变化
watch(
  () => currentStatus.hours,
  () => {
    handleMonitoringPointChange()
  },
  { immediate: true }
)
</script>

<template>
  <div class="importantUserMonitoring-container no-background-container">
    <!-- <div class="index-tittle">用户预警监测</div> -->

    <!-- Add the monitoring overview cards section -->
    <div class="page-top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in monitoringCards" :key="index" :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card>
            <div class="card-top">
              <div class="title-with-icon">
                <vab-icon class="card-icon" :icon="item.icon" />
                <span>{{ item.title }}</span>
              </div>
              <div>{{ item.en }}</div>
            </div>
            <div class="card-middle">
              <div v-for="(data, dataIndex) in item.data" :key="dataIndex" class="middle-row">
                <div class="middle-left">
                  <div>{{ data.name }}</div>
                  <div>{{ data.en }}</div>
                </div>
                <div class="middle-right">
                  <span>{{ data.value }}</span>
                  <span>{{ data.unit }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用户档案查询</span>
            </div>
          </div>
          <div class="search-style">
            <el-row :gutter="20">
              <el-col :lg="18" :md="18" :sm="20" :xl="19" :xs="16">
                <div>
                  <el-input
                    v-model="userImageModel"
                    clearable
                    placeholder="请输入编号"
                    size="large"
                    @input="searchUser"
                    @keyup.enter="searchUser"
                  >
                    <template #prefix>
                      <vab-icon icon="search-2-line" style="color: #909399" />
                    </template>
                  </el-input>
                </div>
              </el-col>
              <el-col :lg="6" :md="6" :sm="4" :xl="5" :xs="8">
                <div class="search-button">
                  <el-button size="large" type="primary" @click="searchUser">查询</el-button>
                </div>
              </el-col>
            </el-row>

            <!-- 搜索结果表格 -->
            <div v-if="searchResults.length > 0" class="search-results">
              <el-table :data="searchResults" :header-cell-style="{ backgroundColor: '#dbf4ee' }" style="margin-top: 20px">
                <el-table-column label="用户名称" prop="name" />
                <el-table-column label="所属台区" prop="district" />
                <el-table-column label="容量" prop="capacity" />
                <el-table-column label="用户组" prop="userGroup" />
                <el-table-column label="操作" width="300">
                  <template #default="scope">
                    <el-button size="small" type="primary" @click="showAlarmDetails(scope.row)">查询历史告警</el-button>
                    <el-button size="small" type="success" @click="addToMonitored(scope.row)">添加重要用户</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 无搜索结果提示 -->
            <div v-else-if="userImageModel && searchResults.length === 0" class="no-results">
              <el-empty description="未找到匹配的用户信息" />
            </div>

            <!-- 初始状态提示 -->
            <div v-else class="initial-state">
              <el-empty description="请在搜索框中输入用户编号进行查询" :image-size="120">
                <div class="search-hint">
                  <vab-icon icon="search-2-line" style="margin-right: 8px; font-size: 20px" />
                  <span>如：U037、U042、U055</span>
                </div>
              </el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 告警详情弹窗 -->
      <el-dialog v-model="showDialog" class="alarm-dialog" :close-on-click-modal="true" destroy-on-close title="历史告警详情" width="50%">
        <div v-if="selectedUser" class="alarm-details">
          <div class="user-info">
            <div class="info-icon">
              <vab-icon icon="user-3-line" />
            </div>
            <div class="info-content">
              <div class="user-id">用户编号: {{ selectedUser.id }}</div>
              <div class="user-type">{{ selectedUser.userGroup }}</div>
            </div>
          </div>

          <div class="alarm-list">
            <div class="alarm-title">告警记录</div>
            <el-divider />

            <div v-if="selectedUser.id in alarmHistory && alarmHistory[selectedUser.id].length > 0">
              <div v-for="(alarm, index) in alarmHistory[selectedUser.id]" :key="index" class="alarm-item">
                <div class="alarm-date">{{ alarm.date }}</div>
                <div class="alarm-content">{{ alarm.content }}</div>
                <div
                  class="alarm-status"
                  :class="{ 'status-processed': alarm.status === '已处理', 'status-processing': alarm.status === '处理中' }"
                >
                  {{ alarm.status }}
                </div>
              </div>
            </div>

            <div v-else class="no-alarm">
              <el-empty description="暂无告警记录" />
            </div>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showDialog = false">关闭</el-button>
            <el-button type="primary" @click="showDialog = false">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>重点监测用户表</span>
            </div>
          </div>
          <div class="monitored-users-table">
            <div v-if="monitoredUsers.length > 0">
              <el-table :data="monitoredUsers" :header-cell-style="{ backgroundColor: '#dbf4ee' }">
                <el-table-column label="用户名称" prop="name" />
                <el-table-column label="所属台区" prop="district" />
                <el-table-column label="容量" prop="capacity" />
                <el-table-column label="用户组" prop="userGroup" />
                <el-table-column label="当前负荷" width="100">
                  <template #default>
                    <span>5kW</span>
                  </template>
                </el-table-column>
                <el-table-column label="告警状态" width="100">
                  <template #default>
                    <span style="color: #409eff">-进行中-</span>
                  </template>
                </el-table-column>
                <el-table-column label="户变关系状态" width="120">
                  <template #default>
                    <span style="color: #67c23a">-正常-</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template #default="scope">
                    <el-button size="small" type="primary" @click="showAlarmDetails(scope.row)">查询历史告警</el-button>
                    <el-button size="small" type="danger" @click="removeFromMonitored(scope.row.id)">移出关注列表</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else class="no-monitored-users">
              <el-empty description="暂无重点监测用户" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <!-- <div class="index-top">
            <el-row :gutter="20">
              <el-col :lg="12" :md="12" :sm="24" :xl="4" :xs="24" v-for="(item, index) in topList" :key="index">
                <div
                  class="card-content"
                  :class="chooseIndex == index ? 'card-choose' : 'card-nochoose'"
                  @click="handleStyleFun($event, index)"
                >
                  <div class="card-icon">
                    <vab-icon :icon="item.icon" />
                  </div>
                  <span style="margin: 0 20px">{{ item.content }}</span>
                  <div>
                    <span class="card-blod">{{ item.number }}</span>
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div> -->
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用户日负荷特征曲线图</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.status" placeholder="请选择">
                  <el-option label="当前+预测" value="0" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-select v-model="currentStatus.user" placeholder="请选择">
                  <el-option label="所有用户" value="0" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 350px">
            <vab-chart :option="option" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>漏电监测点实时数据</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.hours" placeholder="请选择" style="width: 150px">
                  <el-option v-for="item in monitoringPoints" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
          </div>
          <div class="leakage-monitoring-card">
            <div class="line-style">
              <vab-chart :option="optionThree" />
            </div>
            <div class="table-container">
              <el-table :data="displayLeakageData" :header-cell-style="{ backgroundColor: '#dbf4ee' }">
                <el-table-column fixed label="时间" prop="date" />
                <el-table-column label="用户" prop="name" />
                <el-table-column label="当前电流" prop="state" />
                <el-table-column label="状态" prop="city" />
              </el-table>
              <div class="pagination-container">
                <el-pagination
                  v-model:current-page="pagination.currentPage"
                  v-model:page-size="pagination.pageSize"
                  background
                  layout="total, sizes, prev, pager, next"
                  :page-sizes="[4, 8, 12]"
                  :total="pagination.total"
                />
              </div>
            </div>
            <div>
              <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
                <div class="list-content" style="margin-top: 10px">
                  <div class="left-content"></div>
                  <div class="right-content">
                    <span>用户编号: {{ selectedMonitoringUser }}</span>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>预警信息中心</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.currentDay" placeholder="请选择">
                  <el-option label="当日" value="0" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-button>查看全部</el-button>
              </div>
            </div>
          </div>
          <div>
            <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#dbf4ee' }" :height="480">
              <el-table-column fixed label="时间" prop="date" width="150" />
              <el-table-column label="设备/用户" prop="name" width="120" />
              <el-table-column label="异常类型" prop="state" width="120" />
              <el-table-column label="异常值" prop="city" width="120" />
              <el-table-column label="严重级别" prop="address" width="120" />
              <el-table-column label="处理状态" prop="tag" width="120" />
              <el-table-column label="处理" width="120">
                <template #default="scope">
                  <span :style="{ color: scope.row.processingResult === '已处理' ? '#67C23A' : '' }">
                    {{ scope.row.processingResult }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="忽略" width="120">
                <template #default="scope">
                  <span :style="{ color: scope.row.ignoreResult === '已忽略' ? '#909399' : '' }">
                    {{ scope.row.ignoreResult }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="派单" width="120">
                <template #default="scope">
                  <span :style="{ color: scope.row.dispatchResult === '已派单' ? '#E6A23C' : '' }">
                    {{ scope.row.dispatchResult }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                  <el-button link size="small" type="success" @click="handleClick(scope.row)">处理</el-button>
                  <el-button link size="small" type="info" @click="handleIgnore(scope.row)">忽略</el-button>
                  <el-button link size="small" type="warning" @click="handleDispatch(scope.row)">派单</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.importantUserMonitoring-container {
  .page-top {
    .card-top {
      position: relative;
      padding-bottom: 15px;
      margin-bottom: 15px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px dashed #ebeef5;

      .title-with-icon {
        display: flex;
        gap: 8px;
        align-items: center;

        .card-icon {
          width: 40px;
          height: 40px;
          padding: 8px;
          font-size: 24px;
          color: #0ab389;
          background-color: rgba(10, 179, 137, 0.1);
          border-radius: 8px;
        }
      }
      div:first-child {
        color: #303133;
      }

      div:last-child {
        margin-top: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #909399;
      }
    }

    .card-middle {
      .middle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding-bottom: 10px;
        margin-top: 16px;
        border-bottom: 1px solid #f2f5fa;
        transition: all 0.3s ease;

        &:hover {
          border-bottom-color: #d4e6e0;
          transform: translateX(5px);
        }

        .middle-left {
          font-size: 16px;

          div:first-child {
            font-weight: 500;
            color: #303133;
          }

          div:last-child {
            margin-top: 4px;
            font-size: 12px;
            color: #909399;
          }
        }

        .middle-right {
          position: relative;
          display: flex;
          align-items: baseline;

          &::before {
            position: absolute;
            top: 50%;
            left: -15px;
            width: 3px;
            height: 70%;
            content: '';
            background-color: #0ab389;
            border-radius: 3px;
            opacity: 0;
            transform: translateY(-50%);
            transition: all 0.3s ease;
          }

          span:nth-child(1) {
            font-size: 26px;
            font-weight: bold;
            color: #0ab389;
            transition: all 0.3s ease;
          }

          span:nth-child(2) {
            margin-left: 6px;
            font-size: 14px;
            color: #909399;
          }
        }

        &:hover .middle-right::before {
          left: -10px;
          opacity: 1;
        }
      }
    }
  }

  // 漏电监测卡片样式
  .leakage-monitoring-card {
    height: 480px;
    overflow-y: auto;

    .table-container {
      margin-top: 10px;

      .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 15px;
      }
    }
  }
  :deep() {
    .el-card {
      background-color: #fff;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
        transform: translateY(-5px);
      }

      .el-card__header {
        position: relative;

        > div > span {
          display: flex;
          align-items: center;

          i {
            margin-right: 3px;
          }
        }
      }

      .el-card__body {
        position: relative;

        .card-footer-tag {
          position: absolute;
          right: var(--el-margin);
          bottom: 15px;
        }
      }
    }

    .alarm-dialog {
      .el-dialog__header {
        padding: 15px 20px;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
      }

      .el-dialog__body {
        padding: 20px;
      }

      .el-dialog__footer {
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
      }
    }
  }

  // 重点监测用户表样式
  .monitored-users-table {
    height: 480px;
    margin-top: 20px;
    overflow-y: auto;

    .el-table {
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .no-monitored-users {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 400px;
    }
  }

  // 告警详情弹窗样式
  .alarm-details {
    padding: 10px;

    .user-info {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 20px;
      background-color: #f8f8f8;
      border-radius: 8px;

      .info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: 15px;
        font-size: 24px;
        color: white;
        background-color: #0ab389;
        border-radius: 50%;
      }

      .info-content {
        flex: 1;

        .user-id {
          margin-bottom: 5px;
          font-size: 16px;
          font-weight: bold;
        }

        .user-type {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .alarm-list {
      .alarm-title {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
      }

      .alarm-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        margin-bottom: 10px;
        background-color: #f8f8f8;
        border-left: 4px solid #0ab389;
        border-radius: 6px;

        .alarm-date {
          width: 100px;
          font-weight: bold;
        }

        .alarm-content {
          flex: 1;
        }

        .alarm-status {
          width: 80px;
          padding: 2px 8px;
          font-size: 12px;
          text-align: center;
          border-radius: 4px;
        }

        .status-processed {
          color: #0ab389;
          background-color: #e6f7f1;
        }

        .status-processing {
          color: #fa8c16;
          background-color: #fff7e6;
        }
      }

      .no-alarm {
        padding: 30px 0;
      }
    }
  }

  .index-tittle {
    width: 100%;
    height: 60px;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #000;
    background-color: #fff;
  }
  .card-style {
    :deep() {
      .el-card__body {
        height: 550px;
      }
    }
  }
  .index-top {
    width: 100%;
    margin-top: 20px;

    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 60px;
      margin-bottom: 20px;
      line-height: 60px;
      text-align: center;
      background-color: #f2f5fa;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
        transform: translateY(-5px);
      }

      > span {
        margin: 0 20px;
      }
      .card-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: #0ab389;
        background-color: rgba(10, 179, 137, 0.1);
        border-radius: 8px;
      }
      .card-blod {
        font-size: 16px;
        font-weight: bold;
        color: #0ab389;
        transition: all 0.3s ease;
      }
    }
    .card-choose {
      position: relative;
      background-color: #cef0e7;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
      border: 1px solid #09b388;

      &::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 0;
        height: 0;
        content: '';
        border: 6px solid #09b388;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 6px;
      }
    }

    .card-nochoose {
      background-color: #f2f5fa;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.2));
      border: none;
    }
  }
  .index-middle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    .middle-left {
      display: flex;
      margin: 0;
      vertical-align: middle;
      .title-style {
        display: inline-block;
        width: 5px;
        height: 20px;
        margin-right: 10px;
        background-color: #0ab389;
        border-radius: 0 5px 5px 0;
      }
    }
    .middle-right {
      display: flex;
    }
  }
  .line-style {
    :deep() {
      .echarts {
        height: 260px !important;
      }
    }
  }
  .search-style {
    height: 480px;
    margin-top: 20px;

    .search-results {
      max-height: 350px;
      margin-top: 20px;
      overflow-y: auto;
    }

    .no-results {
      margin-top: 80px;
      text-align: center;
    }

    .initial-state {
      margin-top: 80px;
      text-align: center;

      .search-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        font-size: 14px;
        color: #909399;

        i {
          margin-right: 8px;
          color: #0ab389;
        }
      }

      :deep() {
        .el-empty__description {
          margin-top: 15px;
          font-size: 16px;
          color: #606266;
        }

        .el-empty__image {
          opacity: 0.8;
        }
      }
    }

    // 绿色背景色---基础按钮
    :deep() {
      .el-button--primary {
        color: #ffffff;
        background-color: #0ab389;
        border-color: #0ab389;
      }
      .el-button--primary.el-button--large.is-active,
      .el-button--primary.el-button--large:active {
        color: #ffffff;
        background-color: #afe4d7;
        border-color: #afe4d7;
      }
    }
  }
  .list-content {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 60px;
    border: 1px solid #f2f5fa;
    border-radius: 10px;
    .left-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 60px;
      background: linear-gradient(135deg, #09b388, hsl(166, 44%, 83%));
      border-radius: 10px 0 0 10px;
    }
    .right-content {
      margin-left: 30px;
    }
  }
}
</style>
